<!DOCTYPE html>
<html>
<head>
	<title>跳动的心</title>
	<style>
		/*1.抓到div元素 ❤*/
		div{
			width: 200px;
			height: 200px;
			background: #e4393c;  /*京东红*/
			/*居中*/
			margin: 200px auto;
			/*旋转*/
			transform: rotate(45deg);
	/*添加动画: 关键帧名称 过渡时间 流畅度 无限次*/
			animation: heart .8s linear infinite;
		}
		/*2.div:after伪类选择器
			实现功能：在元素之后添加文本
			content:"文本内容";
		  */
		div:after{
			content: "";
			/*显示属性:行元素转块元素*/
			display: block;
			/*变成⚪*/
			width: 200px;
			height: 200px;
			background: #e4393c;
			border-radius: 200px;
			/*定位*/
			position: relative;
			left: -100px;
			top: -200px;
		}
		/*3.div:before伪类选择器
           实现功能：在元素之前添加文本
			content:"文本内容";
		*/
		div:before{
			content: "";
			/*显示属性:行元素转块元素*/
			display: block;
			/*变成⚪*/
			width: 200px;
			height: 200px;
			background: #e4393c;
			border-radius: 200px;
			/*定位*/
			position: relative;
			top: -100px;
		}

		/*跳动动画功能:关键帧*/
		@keyframes heart{
			0%{
				/*缩放比例:scale(1)等比例*/
				transform: rotate(45deg) scale(1);
			}
			70%{
				transform: rotate(45deg) scale(.8);
			}
			100%{
				transform: rotate(45deg) scale(1.2);
			}
		}



	</style>
</head>
<body>
<!-- 心 div元素 
元素的分类：根据特点分类
块元素：设置高宽，独占一行    
行元素：不可设置高宽，同在一行  : 文本
-->
<div></div>
</body>
</html>